<template>
	<view :style="'height:'+windowHeight + 'rpx'" class="container">
		<titlebar :back="true" text="话题列表" backgroundColor='#ffffff' color='#3D3A3A'>

		</titlebar>
		
		<z-paging ref="paging" v-model="topicList" height="100vh" refresher-refreshing-text="  " @query="queryList" :fixed="true"
			:auto="false">
			<z-paging-cell>
			<view class="container-content">
				<u-search shape="square" @custom="custom" @change="changeData" v-model="topic" placeholder="请输入话题"
					searchIconSize="18" bgColor="#ededed" placeholderColor="#ADB0AE"
					searchIcon="https://dnsverify.pfmoto.com/appstatic/community/topic-icon.png"
					:showAction="true" actionText="取消">
				</u-search>

				<view v-if="type == 1">
					<view class="topic-item" v-for="(item,index) in topicList" :key="item.uuid"
						@click="enterTopicDetail(item)">

						<image class="cover"
							:src="item.cover||'https://dnsverify.pfmoto.com/appstatic/community/topic-cover.jpg'"
							mode="">
						</image>
						<view class="item">
							<view class="title">
								<text>#{{item.name}}</text>
							</view>
							<view class="content" v-if="item.summary!=null&&item.summary!=''">
								<text>{{item.summary}}</text>
							</view>
							<view class="content" v-else>
								<text>暂无简介</text>
							</view>
							<view class="tips-wraper">
								<view class="tips">
									<image class=""
										src="https://dnsverify.pfmoto.com/appstatic/community/topic-count.png"
										mode=""></image>
									<text>{{item.partakeNum || 0}}</text>
								</view>
								<view class="tips">
									<image class=""
										src="https://dnsverify.pfmoto.com/appstatic/community/ac-2.png"
										mode="">
									</image>
									<text>{{item.commentNum || 0}}</text>
								</view>
							</view>
						</view>
						<view class="join" @click.stop="creatMoments(item)">
							<text>参与话题</text>
						</view>
					</view>

				</view>
				<view v-else class="s-topic">
					<view class="s-topic-item" @click="creatMoments(item)" v-for="(item,index) in topicList"
						:key="item.uuid">
						<image src="https://dnsverify.pfmoto.com/appstatic/community/topic-icon.png"
							mode="aspectFill">
						</image>
						<text>{{item.name||""}}</text>
					</view>
					<view class="noData" v-if="topicList.length ==0">
						<text>未搜索到相关话题？</text>
						<text @click="creatTopic">#创建话题</text>
					</view>
				</view>

			</view>
			</z-paging-cell>
		</z-paging>
	</view>
</template>

<script>
	const app = getApp();
	const util = require('@utils/util.js');
	const network = require('@manager/network-manager.js');
	const dialog = require('@utils/dialog.js');
	import titlebar from '@/components/titlebar/titlebar'
	export default {
		data() {
			return {
				type: 1, //1 正常列表 2 搜索列表
				topic: '',
				search: '',
				status: false,
				topicList: [],
				windowHeight: '',
				navigationBarHeight: '',
				pageNo: 0,
				pageSize: 0,

			}
		},
		components: {
			titlebar
		},
		onLoad() {
			var that = this
			uni.getSystemInfo({
				success: function(res) {
					console.log(res, 'getSystemInfo');
					let clientHeight = res.windowHeight - 44;
					let clientWidth = res.windowWidth;
					let ratio = 750 / clientWidth; //计算为百分比
					let rpxHeight = ratio * clientHeight + 24;
					that.windowHeight = rpxHeight;
					that.navigationBarHeight = res.statusBarHeight + res.safeArea.top + 'px'

				}
			})

		},
		mounted() {
			this.$nextTick(() => {
				this.$refs.paging.reload();
			})
		},
		methods: {
			queryList(pageNo, pageSize) {
				this.pageNo = pageNo
				this.pageSize = pageSize
				this.loadTopicList(pageNo, pageSize, this.search)

			},
			creatMoments(item) {
				if (util.isLogin(getApp())) {

					uni.setStorageSync('topic', item)
					uni.navigateTo({
						url: '/module_community/pages/moments/moments'
					})
				} else {
					util.jumpLogin("moments")
				}
			},
			enterTopicDetail(item) {
				uni.navigateTo({
					url: '/module_community/pages/topic/detail/detail?from=topic&id=' + item.uuid
				})
			},
			custom() {
				this.topic = ""
			},
			creatTopic() {
				if (util.isLogin(getApp())) {
					var params = {
						"name": this.search,
						"authorId": app.getUserId(),
						"createrType": 0
					}
					var uri = app.globalData.config.interfaces.URL_TOPIC_ADD;
					network.post(uri, params, 'json').then(res => {
						uni.stopPullDownRefresh();
						if (res.code == 200) {
							uni.showToast({
								title: "创建成功",
								duration: 3000,
								icon: 'none',
								success: () => {
									setTimeout(() => {
										this.topic = ''
										uni.setStorageSync('topic', res.data)
										uni.navigateTo({
											url: '/module_community/pages/moments/moments'
										})
									}, 2000)
								}
							})

						} else {
							setTimeout(() => {
								wx.showToast({
									title: res.message,
									mask: true,
									icon: 'none',
									duration: 2000
								});
							}, 500);

						}
					}).catch(res => {
						setTimeout(() => {
							wx.showToast({
								title: res.errMsg,
								mask: true,
								icon: 'none',
								duration: 2000
							});
						}, 500);
						console.error(res);
					});


				} else {
					util.jumpLogin()
				}
			},
			changeData(val) {
				if (val !== '') {
					this.type = 2
				} else {
					this.type = 1
				}
				this.search = val
				this.$refs.paging.reload();
			},
			loadTopicList(pageNo, pageSize, name) {
				var _self = this
				var uri = app.globalData.config.interfaces.URL_TOPIC_LIST;

				var params = {
					"pageNum": pageNo,
					"pageSize": pageSize,
					"authorId": app.getUserId(),
					"name": name
				};
				network.get(uri, params, 'form').then(res => {
					uni.stopPullDownRefresh();

					if (res.code == 200) {
						// _self.topicList = res.data.list;
						_self.$refs.paging.complete(res.data.list)

					} else {
						uni.showToast({
							title: res.message,
							duration: 3000,
							icon: 'none'
						})
					}
				}).catch(res => {
					uni.stopPullDownRefresh();
					uni.showToast({
						title: res.errMsg,
						duration: 3000,
						icon: 'none'
					})
					console.error(res);
				});
			},
		}
	}
</script>

<style scoped>
	.titleText {
		color: #3D3A3A;
		text-align: center;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-weight: 600;
		font-size: 16px;
		align-items: center;
		display: flex;
		position: absolute;
		top: calc(50% - 10px);
		left: calc((100% - 40px)/2);
	}

	.title {
		font-weight: 400;
		font-size: 28rpx;
		line-height: 40rpx;

		width: 340rpx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		/*设置方向*/
		-webkit-line-clamp: 1;
		/*设置超过为省略号的行数*/
		overflow: hidden;
		color: #3D3A3A;
	}

	/deep/.u-search {
		margin: 30rpx 0 !important;
	}

	.noData {
		margin-top: 40rpx;
		display: flex;
		justify-content: space-between;
	}

	.noData text {
		font-size: 28rpx;
	}

	.noData text:first-child {
		color: #ADB0AE;
	}

	.noData text:last-child {
		color: #ea5454;
	}

	.s-topic {
		margin-top: 40rpx;
	}

	.s-topic-item {
		display: flex;
		color: #ea5454;
		padding: 40rpx 0;
		align-items: center;
		box-shadow: inset 0px -1px 0px rgba(0, 0, 0, 0.05);

	}

	.s-topic-item image {
		width: 32rpx;
		height: 32rpx;
		margin-right: 16rpx;
	}

	.noMore {
		text-align: center;
		font-size: 28rpx;
		padding: 30rpx 0;
		color: #3D3A3A;
		padding-bottom: 120rpx;
	}

	.join {
		width: 144rpx;
		height: 50rpx;
		line-height: 50rpx;
		text-align: center;
		color: #ffffff;

		background-color: #EA5404;
		border-radius: 4rpx;
		font-size: 24rpx;
	}

	.topic-item {
		margin-top: 30rpx;
		border-bottom: 1px solid #EDEDED;
		padding-bottom: 30rpx;
	}

	.topic-item .item {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.tips image {
		width: 32rpx;
		height: 32rpx;
		margin-right: 4rpx;
		position: relative;
		top: 4rpx;
	}

	.tips-wraper {
		display: flex;
		width: 60%;
		justify-content: space-between;
		align-items: center;
	}

	.tips text {
		font-size: 24rpx;
		line-height: 34rpx;

		position: relative;
		top: -1rpx;

		color: #ADB0AE;
	}

	.content {
		font-weight: 400;
		font-size: 24rpx;
		line-height: 150.2%;
		width: 342rpx;

		color: #B3B3B3;

		display: -webkit-box;
		-webkit-box-orient: vertical;
		/*设置方向*/
		-webkit-line-clamp: 2;
		/*设置超过为省略号的行数*/
		overflow: hidden;

	}

	.z-paging-content {
		height: calc(100vh - 260upx);
	}

	.container-content {
		width: calc(100% - 40upx);
		overflow: hidden;
		padding:160upx 20upx 20upx 20upx;
		
	}

	.topic-item {
		display: flex;
		justify-content: space-between;
	}

	.cover {
		width: 160rpx;
		height: 160rpx;
	}

	/deep/.u-search__content {
		background-image: url('https://dnsverify.pfmoto.com/appstatic/static/community/topic-icon.png');
		background-size: 28rpx 28rpx;
		background-repeat: no-repeat;
		background-position: 20rpx 50%;
	}
</style>
